<script setup lang="ts">
import { onMounted, ref } from 'vue'
import StatBoxCard from '../stat-box-card/StatBoxCard.vue'
import StatBoxChart from '../stat-box-chart/StatBoxChart.vue'
import { getLineChart, getBarChart } from '@/plugins/echarts/options/index'

// 四个卡片
const card1 = ref<any>(null)
const card2 = ref<any>(null)
const card3 = ref<any>(null)
const card4 = ref<any>(null)

const initCards = () => {
  setTimeout(() => {
    card1.value = {
      num: 12256
    }
    card2.value = {
      num: 12256,
      compare: -205
    }
    card3.value = {
      num: 12256
    }
    card4.value = {
      num: 12256,
      compare: 205
    }
  }, 600)
}

// 近15日访客量趋势
const lineChartOpt1 = ref<any>(null)
const line1NoData = ref(false)
const initLine1 = () => {
  setTimeout(() => {
    lineChartOpt1.value = getLineChart({
      seriesData: [120, 132, 101, 134, 90, 230, 210],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      color: '#0275FF'
    })
  }, 600)
}

// 近15日点击量趋势
const lineChartOpt2 = ref<any>(null)
const line2NoData = ref(false)
const initLine2 = () => {
  setTimeout(() => {
    lineChartOpt2.value = getLineChart({
      seriesData: [120, 132, 101, 134, 90, 230, 210],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      color: '#FFBB00',
      tooltipBgColor: '#352000'
    })
  }, 600)
}

// 近一年访客量趋势
const barChartOpt1 = ref<any>(null)
const bar1NoData = ref(false)
const initBar1 = () => {
  setTimeout(() => {
    barChartOpt1.value = getBarChart({
      seriesData: [120, 132, 101, 134, 90, 230, 210],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      color: '#0275FF'
    })
  }, 600)
}

// 近一年点击量趋势
const barChartOpt2 = ref<any>(null)
const bar2NoData = ref(false)
const initBar2 = () => {
  setTimeout(() => {
    barChartOpt2.value = getBarChart({
      seriesData: [120, 132, 101, 134, 90, 230, 210],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      color: '#FFBB00'
    })
  }, 600)
}

onMounted(() => {
  initCards()
  initLine1()
  initLine2()
  initBar1()
  initBar2()
})
</script>

<template>
  <div class="stat-page-container">
    <div class="cards-container">
      <StatBoxCard :data="card1" title="总访客量UV" color="green"></StatBoxCard>
      <StatBoxCard :data="card2" title="当日访客量UV" color="yellow" compare></StatBoxCard>
      <StatBoxCard :data="card3" title="总点击量PV" color="blue"></StatBoxCard>
      <StatBoxCard :data="card4" title="当日点击量PV" color="orange" compare></StatBoxCard>
    </div>
    <div class="charts-container">
      <StatBoxChart title="近15日访客量趋势">
        <template v-if="line1NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!lineChartOpt1">
            <div v-loading="!lineChartOpt1" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="lineChartOpt1" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
      <StatBoxChart title="近一年访客量趋势">
        <template v-if="bar1NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!barChartOpt1">
            <div v-loading="!barChartOpt1" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="barChartOpt1" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
      <StatBoxChart title="近15日点击量趋势">
        <template v-if="line2NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!lineChartOpt2">
            <div v-loading="!lineChartOpt2" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="lineChartOpt2" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
      <StatBoxChart title="近一年点击量趋势">
        <template v-if="bar2NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!barChartOpt2">
            <div v-loading="!barChartOpt2" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="barChartOpt2" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.stat-page-container {
  @include rect(100%, 100%);
  display: flex;
  flex-direction: column;
  .cards-container {
    @include rect(100%, 96px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .charts-container {
    width: 100%;
    flex: 1;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    min-height: 580px;
  }
  .no-data-container {
    @include rect(100%, 100%);
    @include flex(row, center, center);
    span {
      font-family: 'PingFangSC-Regular';
      font-size: 14px;
      color: var(--theme-color-info-light-2);
    }
  }
}
</style>
